<template>
	<view>
		<view class="goods">
			<view class="card u-flex">
				<image :src="goods.img800s"></image>
				<text class="u-line-1">{{ goods.name }}</text>
			</view>
		</view>
		<view class="gap"></view>
		<view class="card list" v-for="item in askList" :key="item.ask_id">
			<view class="question u-flex">
				<image class="img" src="/static/icon/ask_question.png"></image>
				<text class="txt">{{item.ask}}</text>
			</view>
			<view class="answer u-flex" v-for="(sitem,sindex) in item.top_reply" :key="sindex">
				<image class="img" src="/static/icon/answer.png"></image>
				<text class="txt">{{sitem}}</text>
			</view>
			<view class="summary u-flex">
				<text>全部{{item.reply_total}}个回答</text>
				<text>{{item.utime | date('yyyy.mm.dd')}}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			gid: 0,
			goods: {},
			askList: []
		}
	},
	onLoad(e) {
		this.gid = parseInt(e.gid)
		console.log(this.gid)
		this.getQuestionList()
	},
	methods: {
		getQuestionList() {
			this.$u.api.askInfo({gid:this.gid}).then(res => {
				this.goods = res.data.goods
				this.askList = res.data.list
				uni.setNavigationBarTitle({
					title: `问大家(${res.data.total})`
				})
			})
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #f9f9f9;
}
.goods {
	position: fixed;
	top: 0;
	left: 0;
	width: 750rpx;
	height: 130rpx;
	background-color: #f9f9f9;
	// background-color: red;
	.card {
		margin: 10rpx 20rpx;
		padding: 16rpx 20rpx;
	}
	image {
		width: 72rpx;
		height: 72rpx;
		margin-right: 10rpx;
	}
	z-index: 1;
}
.gap{
	height: 130rpx;
}
.card {
	margin: 0 20rpx 30rpx;
	padding: 30rpx 20rpx;
	border-radius: 12rpx;
	font-size: 24rpx;
	color: #555;
	background-color: #fff;
}
.list {
	image {
		width: 30rpx;
		height: 30rpx;
		min-width: 30rpx;
		margin-right: 16rpx;
	}
	.question {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
	}
	.answer{
		margin-top: 24rpx;
	}
	.txt {
		width: 628rpx;
		max-width: 628rpx;
	}
	.img {
		margin-top: 4rpx;
		align-self: flex-start;
		
	}
	.summary{
		justify-content: space-between;
		margin-top: 24rpx;
		padding-left: 46rpx;
		color: #999;
		font-size: 22rpx;
	}
}
</style>
